<!DOCTYPE HTML>
<html>
<body>
<div contenteditable="true" id="editable">
<li id="li" style="border: 1px solid black;"><span><div id="contents" style="border: 1px solid red;">DropAboveMe</div></span></li>
<div><span id="drag">DragMe</span></div>
</div>

<ul id="console"></ul>
<script src="../../resources/dump-as-markup.js"></script>
<script>
function log(str) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(str));
    var console = document.getElementById("console");
    console.appendChild(li);
}

function runTest() {
    if (!window.testRunner)
        log("This can only be run automatically using the layout test engine.  To run it manually, drag 'Dragme' and drop it above 'DropAboveMe'.");
    
    var drag = document.getElementById("drag");
    var dragx = drag.offsetParent.offsetLeft + drag.offsetLeft + drag.offsetWidth / 2;
    var dragy = drag.offsetParent.offsetTop +  drag.offsetTop + drag.offsetHeight / 2;
    
    eventSender.mouseMoveTo(dragx, dragy);
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.mouseDown();
    eventSender.mouseUp();
    // Leap forward so that the next mouseDown doesn't trigger a triple click.
    eventSender.leapForward(1200);
    
    eventSender.mouseDown();
    // Leap forward so that the mouse movement causes a drag instead of selection creation.
    eventSender.leapForward(500);

    var li = document.getElementById("li");
    
    var dropx = li.offsetLeft;
    var dropy = li.offsetTop + 15;

    eventSender.mouseMoveTo(dropx, dropy);
    eventSender.mouseUp();
    
    Markup.description("This tests dropping content onto a list items content when the content is wrapped in a span.  You should see 'DropAboveMe DragMe'. "
        + "See <rdar://4861080>, but note that the expected behavior is different than what's described there, since the rendering bug <rdar://4907469> has been fixed.");
    Markup.dump(editable);
}

runTest();
</script>
</body>
</html>
